<template>
  <div class="follow-up-card">
    <!-- 顶部tab切换栏 -->
    <div class="card-title">随访记录</div>
    <!-- 折叠面板 -->
    <div v-if="historyList.length > 0">
      <el-collapse
        v-model="activeNames"
        class="follow-up-collapse"
        v-show="isExpanded"
      >
        <el-collapse-item
          :name="index"
          v-for="(item, index) in historyList"
          :key="index"
        >
          <template #title>
            <div class="collapse-title">
              <span class="diagnosis overflow">{{ item.diagnosis }}</span>
              <span class="diagnosis"
                >{{ item.doctorName }} {{ item.followupDate }}</span
              >
            </div>
          </template>
          <div class="collapse-content">
            <div class="collapse-title info-row">
              <span class="diagnosis overflow">{{ item.diagnosis }}</span>
              <span @click="onCopy(item)" class="diagnosis" style="font-size: 11px; color: #18b3ab;cursor: pointer;"
                >复制</span
              >
            </div>
            <div class="info-row">
              <span class="label"
                >随访渠道:{{
                  useBaseDataStore.getEnumData(
                    item.followupChannel,
                    'followUpChannelEnum'
                  )
                }}</span
              >
            </div>
            <div>
              <div class="info-row">
                <span class="label">随访时间：{{ item.followupDate }}</span>
              </div>
            </div>
            <div class="info-row">
              <span class="label">随访人员：{{ item.followupEmpName }}</span>
            </div>
            <div class="info-row">
              <span class="label">随访结果：{{ item.followupResult }}</span>
            </div>
            <div class="info-row">
              <span class="label">记录人员：{{ item.operatorBy }}</span>
            </div>
            <div class="info-row">
              <span class="label">执行时间：{{ item.operateTime }}</span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div v-else>
      <el-empty :image-size="100" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import stores from '@/store';
import store from '@/store';
const useBaseDataStore = store.useBaseDataStore();
const followupChannel = ref(
  useBaseDataStore.getEnumSelect('followupChannelEnum')
);

const sideTypeEnum = ref<any>(
  stores.useBaseDataStore().getEnumSelect('acupointSideTypeEnum')
);

const sideTypeEnumText = (val: any) => {
  for (let index = 0; index < sideTypeEnum.value.length; index++) {
    let item = sideTypeEnum.value[index];
    if (val == item.value) {
      return item.text;
    }
  }
};
const props = defineProps<{
  historyList: any;
}>();
const emits = defineEmits<{
  (e: 'onCopys',item: any): void;
}>();
// 直接派生，避免副本与时序问题
const historyList = computed<any[]>(() =>
  Array.isArray(props.historyList) ? props.historyList : []
);
// const historyList = ref([
//   {
//     followupId: 6, //随访ID
//     visitNo: '20250801000920010', //诊号;唯一诊号
//     visitDate: '2025-08-01', //就诊日期yyyy-MM-dd
//     followupDate: '2025-08-04', //计划随访日期
//     followupStatus: '2', //随访状态 followupStatusEnum
//     realFollowupDate: '2025-08-04', //实际随访日期
//     followupEmpId: 10, //随访人ID
//     followupEmpName: '王医生的助理', //随访人姓名
//     followupResult: '无异常', //随访结果
//   },
//   {
//     followupId: 6, //随访ID
//     visitNo: '20250801000920010', //诊号;唯一诊号
//     visitDate: '2025-08-01', //就诊日期yyyy-MM-dd
//     followupDate: '2025-08-04', //计划随访日期
//     followupStatus: '2', //随访状态 followupStatusEnum
//     realFollowupDate: '2025-08-04', //实际随访日期
//     followupEmpId: 10, //随访人ID
//     followupEmpName: '王医生的助理', //随访人姓名
//     followupResult: '无异常', //随访结果
//   },
// ]);
// 顶部tab数据与选中状态
const tabs = [{ label: '随访记录', value: 'history' }];
const activeTab = ref('history');

// 折叠面板控制
const activeNames = ref(['1']);
const isExpanded = ref(true); // 控制折叠面板显示/隐藏
const onCopy = (item: any) => {
  emits('onCopys',item);
};
// 切换折叠状态
const toggleCollapse = () => {
  isExpanded.value = !isExpanded.value;
};
</script>

<style scoped lang="scss">
.follow-up-card {
  background: rgba(253, 253, 253, 0.6);
  border-radius: 8px;
  width: 280px;
  height: 100%;
  overflow: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-tabs {
  display: flex;
  width: 100%;
  background: rgba(253, 253, 253, 0.6);
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #ededed;
}
.card-title {
  flex: 1;
  text-align: center;
  height: 48px;
  line-height: 48px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  color: #999;
  background: transparent;
  transition: color 0.2s, background 0.2s;
}
.card-title.active {
  color: #222;
  font-weight: 700;
}

.diagnosis-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e7e7e7;
}

.diagnosis-name {
  font-size: 16px;
  color: #666;
}

.doctor-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.doctor-info:hover {
  opacity: 0.8;
}

.doctor-name {
  font-size: 14px;
  color: #666;
}

.visit-date {
  font-size: 14px;
  color: #666;
}

.expand-icon {
  font-size: 12px;
  color: #666;
  transition: transform 0.3s ease;
}

.expand-icon.rotated {
  transform: rotate(180deg);
}

.follow-up-collapse {
  border: none;
  padding: 0px 16px 10px 16px;
}

:deep(.el-collapse-item__header) {
  border-radius: 6px;
  background: rgba(253, 253, 253, 0.6);
}

:deep(.el-collapse-item__arrow) {
  transition: transform 0.3s ease;
  transform: rotate(-90deg); /* 默认状态(关闭时)向上 */
}

:deep(.el-collapse-item__arrow.is-active) {
  transform: rotate(90deg); /* 展开状态(打开时)向下 */
}

:deep(.el-collapse-item__content) {
  padding: 16px 8px 16px 8px;
  background: #f8f8f8;
  border-radius: 0 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #dcdcdc;
}

.collapse-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.diagnosis {
  color: #333;
  font-weight: bold;
  font-size: 13px;
}

.action-btn {
  font-size: 14px;
  color: #00b3b3;
  cursor: pointer;
}

.collapse-content {
  font-size: 11px;
  line-height: 1.6;
}

.info-row {
  margin-bottom: 8px;
}

.label {
  color: #666;
  margin-right: 8px;
  min-width: 80px;
  flex-shrink: 0;
}

.value {
  color: #333;
  flex: 1;
}
.tcm-box {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px dashed #dcdcdc;
  gap: 0;
}
.tcm-box .info-row {
  width: 33.33%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0;
  padding: 8px 0;
}
.tcm-box .label {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-title {
  width: 280px;
  height: 52px;
  border-radius: 0px 0px 0px 0px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 600;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
  padding-left: 17px;
  line-height: 52px;
  border-bottom: 1px solid #dddddd;
  background: rgba(253, 253, 253, 0.6);
  text-align: left;
}
.overflow {
  width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
